@@include('header.htm', {
  "title": "Chat - Sleek Admin Dashboard Template",

	"vector_map": "",

	"date_range_picker": "",

	"select2": "",

	"ladda": "",

	"toastr": "",

	"flag_icon": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",

	"data_table": "",

	"responsive_data_table": "",

	"expendable_data_table": ""
})

@@include('sidebar.htm', {
	"parent": "app",
	"sub_parent": "app",
	"active": "chat"
})

@@include('top-bar.htm')




<div class="card card-default mb-0">
  <div class="row bg-white no-gutters chat">
    <div class="col-lg-5 col-xl-4">
      <!-- Chat Left Side -->
      <div class="chat-left-side">

        <form class="chat-search">
          <input type="text" class="form-control" placeholder="Search...">
        </form>

        <ul class="list-unstyled border-top mb-0" id="chat-left-content" data-simplebar>
          <li>
            <a href="#" class="media media-message">
              <div class="position-relative mr-3">
                <img class="rounded-circle" src="assets/img/user/u1.jpg" alt="Image">
                <span class="status away"></span>
              </div>
              <div class="media-body d-flex justify-content-between">
                <div class="message-contents">
                  <h4 class="title">Aaren</h4>
                  <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                    odio,
                    eligendi delectus vitae.</p>
                </div>

                <span class="date">12 Jun</span>

              </div>
            </a>
          </li>
          <li>
            <a href="#" class="media media-message media-active">
              <div class="position-relative mr-3">
                <img class="rounded-circle" src="assets/img/user/u2.jpg" alt="Image">
                <span class="status active"></span>
              </div>
              <div class="media-body d-flex justify-content-between">
                <div class="message-contents">
                  <h4 class="title">Leon Battista</h4>
                  <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                    odio,
                    eligendi delectus vitae.</p>
                </div>

                <span class="date">25 July</span>

              </div>
            </a>
          </li>
          <li>
            <a href="#" class="media media-message">
              <div class="position-relative mr-3">
                <img class="rounded-circle" src="assets/img/user/u3.jpg" alt="Image">
                <span class="status away"></span>
              </div>
              <div class="media-body d-flex justify-content-between">
                <div class="message-contents">
                  <h4 class="title">Abriel</h4>
                  <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                    odio,
                    eligendi delectus vitae.</p>
                </div>

                <span class="date">09 Feb</span>

              </div>
            </a>
          </li>
          <li>
            <a href="#" class="media media-message">
              <div class="position-relative mr-3">
                <img class="rounded-circle" src="assets/img/user/u4.jpg" alt="Image">
                <span class="status active"></span>
              </div>

              <div class="media-body d-flex justify-content-between">
                <div class="message-contents">
                  <h4 class="title">Emma</h4>
                  <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                    odio,
                    eligendi delectus vitae.</p>
                </div>

                <span class="date">05 Jan</span>

              </div>
            </a>
          </li>
          <li>
            <a href="#" class="media media-message">
              <div class="position-relative mr-3">
                <img class="rounded-circle" src="assets/img/user/u5.jpg" alt="Image">
                <span class="status away"></span>
              </div>

              <div class="media-body d-flex justify-content-between">
                <div class="message-contents">
                  <h4 class="title">Emily</h4>
                  <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                    odio,
                    eligendi delectus vitae.</p>
                </div>

                <span class="date">17 Mar</span>

              </div>
            </a>
          </li>
          <li>
            <a href="#" class="media media-message">
              <div class="position-relative mr-3">
                <img class="rounded-circle" src="assets/img/user/u6.jpg" alt="Image">
                <span class="status"></span>
              </div>

              <div class="media-body d-flex justify-content-between">
                <div class="message-contents">
                  <h4 class="title">William</h4>
                  <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                    odio,
                    eligendi delectus vitae.</p>
                </div>

                <span class="date">27 May</span>

              </div>
            </a>
          </li>
          <li>
            <a href="#" class="media media-message">
              <div class="position-relative mr-3">
                <img class="rounded-circle" src="assets/img/user/u7.jpg" alt="Image">
                <span class="status away"></span>
              </div>

              <div class="media-body d-flex justify-content-between">
                <div class="message-contents">
                  <h4 class="title">Sophia</h4>
                  <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                    odio,
                    eligendi delectus vitae.</p>
                </div>

                <span class="date">20 Jun</span>

              </div>
            </a>
          </li>
          <li>
            <a href="#" class="media media-message">
              <div class="position-relative mr-3">
                <img class="rounded-circle" src="assets/img/user/u8.jpg" alt="Image">
                <span class="status"></span>
              </div>

              <div class="media-body d-flex justify-content-between">
                <div class="message-contents">
                  <h4 class="title">Sophia</h4>
                  <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                    odio,
                    eligendi delectus vitae.</p>
                </div>

                <span class="date">20 Jun</span>

              </div>
            </a>
          </li>

          <li>
            <a href="#" class="media media-message">
              <div class="position-relative mr-3">
                <img class="rounded-circle" src="assets/img/user/u1.jpg" alt="Image">
                <span class="status away"></span>
              </div>
              <div class="media-body d-flex justify-content-between">
                <div class="message-contents">
                  <h4 class="title">Aaren</h4>
                  <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                    odio,
                    eligendi delectus vitae.</p>
                </div>

                <span class="date">12 Jun</span>

              </div>
            </a>
          </li>
          <li>
            <a href="#" class="media media-message">
              <div class="position-relative mr-3">
                <img class="rounded-circle" src="assets/img/user/u2.jpg" alt="Image">
                <span class="status"></span>
              </div>
              <div class="media-body d-flex justify-content-between">
                <div class="message-contents">
                  <h4 class="title">Abby</h4>
                  <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                    odio,
                    eligendi delectus vitae.</p>
                </div>

                <span class="date">25 July</span>

              </div>
            </a>
          </li>
          <li>
            <a href="#" class="media media-message">
              <div class="position-relative mr-3">
                <img class="rounded-circle" src="assets/img/user/u3.jpg" alt="Image">
                <span class="status away"></span>
              </div>
              <div class="media-body d-flex justify-content-between">
                <div class="message-contents">
                  <h4 class="title">Abriel</h4>
                  <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                    odio,
                    eligendi delectus vitae.</p>
                </div>

                <span class="date">09 Feb</span>

              </div>
            </a>
          </li>
          <li>
            <a href="#" class="media media-message">
              <div class="position-relative mr-3">
                <img class="rounded-circle" src="assets/img/user/u4.jpg" alt="Image">
                <span class="status active"></span>
              </div>

              <div class="media-body d-flex justify-content-between">
                <div class="message-contents">
                  <h4 class="title">Emma</h4>
                  <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                    odio,
                    eligendi delectus vitae.</p>
                </div>

                <span class="date">05 Jan</span>

              </div>
            </a>
          </li>
          <li>
            <a href="#" class="media media-message">
              <div class="position-relative mr-3">
                <img class="rounded-circle" src="assets/img/user/u5.jpg" alt="Image">
                <span class="status"></span>
              </div>

              <div class="media-body d-flex justify-content-between">
                <div class="message-contents">
                  <h4 class="title">Emily</h4>
                  <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                    odio,
                    eligendi delectus vitae.</p>
                </div>

                <span class="date">17 Mar</span>

              </div>
            </a>
          </li>
          <li>
            <a href="#" class="media media-message">
              <div class="position-relative mr-3">
                <img class="rounded-circle" src="assets/img/user/u6.jpg" alt="Image">
                <span class="status away"></span>
              </div>

              <div class="media-body d-flex justify-content-between">
                <div class="message-contents">
                  <h4 class="title">William</h4>
                  <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                    odio,
                    eligendi delectus vitae.</p>
                </div>

                <span class="date">27 May</span>

              </div>
            </a>
          </li>
          <li>
            <a href="#" class="media media-message">
              <div class="position-relative mr-3">
                <img class="rounded-circle" src="assets/img/user/u7.jpg" alt="Image">
                <span class="status"></span>
              </div>

              <div class="media-body d-flex justify-content-between">
                <div class="message-contents">
                  <h4 class="title">Sophia</h4>
                  <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                    odio,
                    eligendi delectus vitae.</p>
                </div>

                <span class="date">20 Jun</span>

              </div>
            </a>
          </li>

        </ul>
      </div>

    </div>
    <div class="col-lg-7 col-xl-8">
      <!-- Chats -->
      <div class="chat-right-side">
        <div class="media media-chat align-items-center mb-0 media-chat-header" href="#">
          <img class="rounded-circle mr-3" src="assets/img/user/u2.jpg" alt="Image">
          <div class="media-body w-100">
            <div class="d-flex justify-content-between align-items-center">
              <h3 class="heading-title mb-0"><a href="#">Leon Battista</a></h3>
              <div class="dropdown">
                <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
                  <a class="dropdown-item" href="user-profile.html">Profile</a>
                  <a class="dropdown-item" href="index.html">Logout</a>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="chat-right-content" id="chat-right-content" data-simplebar>
          <div class="media media-chat media-left">
            <img class="rounded-circle mr-3" src="assets/img/user/u2.jpg" alt="Image">
            <div class="media-body">
              <p class="message">Lorem ipsum dolor sit amet.</p>
              <div class="date-time">27-07-2019, 1.03 PM</div>
            </div>
          </div>

          <div class="media media-chat media-right">
            <div class="media-body">
              <p class="message">Consectetur adipisicing elit Odio ex.</p>
              <div class="date-time">27-07-2019, 1.03 PM</div>
            </div>
            <img class="rounded-circle ml-3" src="assets/img/user/u4.jpg" alt="Image">
          </div>

          <div class="media media-chat media-left">
            <img class="rounded-circle mr-3" src="assets/img/user/u2.jpg" alt="Image">
            <div class="media-body">
              <p class="message">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto dolor, exercitationem
                earum natus doloremque explicabo.</p>
              <p class="message">Accusamus laborum explicabo illum asperiores provident dolore perferendis cumque
                incidunt possimus quia! Deleniti minus</p>
              <div class="date-time">27-07-2019, 1.03 PM</div>
            </div>
          </div>

          <div class="media media-chat media-right">
            <div class="media-body">
              <p class="message">Lorem ipsum dolor sit amet.</p>
              <div class="date-time">27-07-2019, 1.03 PM</div>
            </div>
            <img class="rounded-circle ml-3" src="assets/img/user/u4.jpg" alt="Image">
          </div>

          <div class="media media-chat media-left">
            <img class="rounded-circle mr-3" src="assets/img/user/u2.jpg" alt="Image">
            <div class="media-body">
              <p class="message">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto dolor, exercitationem
                earum natus
                doloremque explicabo.</p>
              <p class="message">Accusamus laborum explicabo illum asperiores provident dolore perferendis cumque
                incidunt
                possimus quia! Deleniti minus</p>
              <div class="date-time">27-07-2019, 1.03 PM</div>
            </div>
          </div>

          <div class="media media-chat media-right">
            <div class="media-body">
              <p class="message">Lorem ipsum dolor sit amet.</p>
              <div class="date-time">27-07-2019, 1.03 PM</div>
            </div>
            <img class="rounded-circle ml-3" src="assets/img/user/u4.jpg" alt="Image">
          </div>

        </div>

        <form class="px-5 pb-3">
          <input type="text" class="form-control mb-3" placeholder="Type your message here">
        </form>
      </div>

    </div>
  </div>
</div>




@@include('footer.htm', {

	"chart_js": "",
	"chartjs": "",

	"google_map": "",
	"mapjs": "",

	"vector_map": "",
	"vector_map_world_mill": "",
	"vector_map_js": "",
	
	"date_range_picker_moment": "",
	"date_range_picker": "",
	"date_range_js": "",

	"select2": "",

	"ladda_spin": "",
	"ladda": "",

	"jquery_mask": "",

	"toastr": "",

	"circle_progress": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",
	"full_calendar_js": "",

	"data_table": "",
	"data_table_bootstrap4": "",

	"responsive_data_table": ""
})
